<template>
    <div class="main-box">
        <div class="search-box">
            <Form :model="searchData" ref="search" :label-width="60" inline>
                <FormItem label="时间" prop="month">
                    <DatePicker v-model="searchData.month" format="yyyy-MM" type="month" :clearable="false" @on-change="getData()"></DatePicker>
                </FormItem>
                <FormItem :label-width="20">
                    <Button type="default" @click="toReset()">重置</Button>
                    <Button type="primary" @click="getData()">搜索</Button>
                    <Button type="success" @click="toExport()">导出</Button>
                </FormItem>
            </Form>
        </div>
        <div class="table-box">
            <vxe-table ref="table" :data="tableData" align="center" border height="100%" :loading="loading">
                <vxe-column field="member_name" title="姓名" minWidth="120" fixed="left"></vxe-column>
                <vxe-column field="join_date" title="入职日期" minWidth="120"></vxe-column>
                <vxe-column field="pass_text" title="是否合格" minWidth="100">
                    <template #default="{ row }">
                        <Tag :color="row.pass ? 'success' : 'error'">{{ row.pass_text }}</Tag>
                    </template>
                </vxe-column>
                <vxe-column field="member_level.level_name" title="绩效级别" minWidth="100"></vxe-column>
                <vxe-column field="new_count" title="有效新增" minWidth="100"></vxe-column>
                <vxe-colgroup title="轿运险">
                    <vxe-column field="total_car_sale" title="自拓保费" minWidth="120"></vxe-column>
                    <vxe-column field="total_car_maintenance" title="维护保费" minWidth="120"></vxe-column>
                    <vxe-column field="total_car" title="总保费" minWidth="120"></vxe-column>
                    <vxe-column field="last_total_car_sale" title="上月自拓保费" minWidth="120"></vxe-column>
                    <vxe-column field="sale_amount_rate" title="自拓保费增长率" minWidth="120">
                        <template #default="{ row }">{{ Number(row.last_total_car_sale) != 0 ? row.sale_amount_rate + "%" : "/" }} </template>
                    </vxe-column>
                    <vxe-column field="bonus" title="绩效奖金" minWidth="120"></vxe-column>
                    <vxe-column field="commission" title="保费提点" minWidth="120">
                        <template #default="{ row }"> {{ row.commission }}% </template>
                    </vxe-column>
                    <vxe-column field="commission_bonus" title="保费提点金额" minWidth="120"></vxe-column>
                </vxe-colgroup>
                <vxe-colgroup title="普货">
                    <vxe-column field="total_ordinary" title="保费额" minWidth="120"></vxe-column>
                    <vxe-column field="ordinary_commission" title="保费提点" minWidth="120">
                        <template #default="{ row }"> {{ row.ordinary_commission }}% </template>
                    </vxe-column>
                    <vxe-column field="ordinary_bonus" title="保费提点金额" minWidth="120"></vxe-column>
                </vxe-colgroup>
                <vxe-colgroup title="岗位津贴">
                    <vxe-column field="allowance_amount" title="第二年当月保费" minWidth="120"></vxe-column>
                    <vxe-column field="allowance" title="岗位津贴" minWidth="120"></vxe-column>
                </vxe-colgroup>
                <vxe-column field="total_bonus" title="总绩效" minWidth="120"></vxe-column>
            </vxe-table>
        </div>
    </div>
</template>
<script>
import api from "@/api";
export default {
    name: "performance_salesman",
    data() {
        return {
            searchData: {
                month: this.$moment().subtract(1, "months").format("YYYY-MM"),
            },
            tableData: [],
            loading: false,
        };
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            this.search();
        },
        search() {
            this.getData();
        },
        getData() {
            this.loading = true;
            api.getPerformanceList({
                ...this.searchData,
                month: this.$moment(this.searchData.month).format("YYYY-MM"),
            })
                .then((res) => {
                    this.tableData = res;
                })
                .finally((res) => {
                    this.loading = false;
                });
        },
        toReset() {
            this.$refs.search.resetFields();
            this.search();
        },
        toExport() {
            let close_msg = this.$Message.loading({
                content: "正在导出...",
                duration: 0,
            });
            api.getPerformanceList({
                ...this.searchData,
                month: this.$moment(this.searchData.month).format("YYYY-MM"),
                export: 1,
            }).then((res) => {
                const link = document.createElement("a");
                link.href = res.download_url;
                link.setAttribute("download", res.download_name);
                document.body.appendChild(link);
                link.click();
                close_msg();
            });
        },
    },
};
</script>
<style scoped lang="less">
.main-box {
    .table-box {
        height: calc(100vh - 200px);
    }
}
</style>
